<!DOCTYPE html>
<html lang="en">
<head>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="__PUBLIC__/lib/video-js/video-js.css" rel="stylesheet">
    <script src="__PUBLIC__/lib/video-js/video.js"></script>
    <script src="__PUBLIC__/lib/video-js/videojs-contrib-hls.min.js"></script>
    <script>
        videojs.options.flash.swf = "__PUBLIC__/lib/video-js/video-js.swf"
    </script>

</head>
<body>
<center>
    <video id="live-stream" class="video-js vjs-default-skin vjs-big-play-centered"
           controls autoplay preload="auto" width="1080" height="520" poster="__PUBLIC__/Common/static/images/videodemo.png"
           data-setup='{"example_option":true}'>
        <source src="http://amaitest.oss-cn-hangzhou.aliyuncs.com/record/live123/4001482214656.m3u8"
                type="application/x-mpegURL">
    </video>
</center>
<hr/>
<center>
    <input type="button" class="player-play" value="播放" />
    <input type="button" class="player-stop" value="停止" />
    <input type="button" class="player-status" value="取得状态" />
    <input type="button" class="player-current" value="当前播放秒数" />
    <input type="button" class="player-goto" value="转到第600秒播放" />
    <input type="button" class="player-length" value="视频时长(秒)" /><br/>
    <input type="button" class="player-setsrc" value="RTMP修改播放地址到M3U8" /><br/>
</center>

<script type="text/javascript">
    var options = {};
    var js_player = videojs('live-stream',options,function onPlayerReady() {
        videojs.log('Your player is ready!');
        // In this context, `this` is the player that was created by Video.js.
        this.play();
        // How about an event listener?
        this.on('ended', function() {
            videojs.log('Awww...over so soon?!');
        });
    });
    //播放 暂停
    $('.player-play').click(function () {
        console.log(js_player.networkState());
    });

    $('.player-setsrc').click(function () {
        js_player.src('http://amaitest.oss-cn-hangzhou.aliyuncs.com/record/live123/4001482214656.m3u8');
    });

    $('.player-current').click(function () {
        alert(js_player.currentTime());
    });

</script>
</body>
</html>
